﻿@using Webdiyer.WebControls.Mvc
@model Webdiyer.WebControls.Mvc.PagedList<WeChatService.Models.efmodel.Message>
@{
    ViewBag.Title = "Index";
}
<link href="@Url.Content("~/Content/uploadify/uploadify.css")" rel="stylesheet" type="text/css"/>
<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try {
                ace.settings.check('breadcrumbs', 'fixed');
            } catch (e) {
            }
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="/welcome">首页</a>
            </li>
            <li class="active">素材管理</li>
        </ul><!-- .breadcrumb -->

    </div>
    
    <div class="page-content">
        <div class="page-header">
            <h1>
                素材管理
                <small>
                    <i class="icon-double-angle-right"></i>
                    文本 &amp; 图文 &amp; 音乐 等
                </small>
            </h1>
        </div><!-- /.page-header -->

        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="alert alert-block alert-success">
                    <button type="button" class="close" data-dismiss="alert">
                        <i class="icon-remove"></i>
                    </button>
                    注意：<br />素材管理！<br />
                </div>
                <div>
                    @* 弹出框选择比较麻烦，改成固定按钮 *@
                    @*                    <a title="添加" class="btn btn-success" id="add_message_event">*@
                    @*                        <i class="icon-beaker align-top bigger-110"></i>*@
                    @*                        添加素材*@
                    @*                    </a>*@
                    <a id="a_add_txt" class="btn btn-success" href="#modal-addtxtmsg-event" data-toggle="modal">
                        <i class="icon-beaker align-top bigger-110"></i>
                        添加文本素材
                    </a>
                    <a id="a_add_ptt" class="btn btn-success" href="#modal-addpttmsg-event" data-toggle="modal">
                        <i class="icon-beaker align-top bigger-110"></i>
                        添加图文素材
                    </a>
                    <a id="a_add_msc" class="btn btn-success" href="#modal-addmscmsg-event" data-toggle="modal">
                        <i class="icon-beaker align-top bigger-110"></i>
                        添加音乐素材
                    </a>

                    <br/><br/>
                    <div class="input-group">
                        <input id="search_key" class="form-control search-query" placeholder="搜索关键字" type="text" value="@ViewBag.serkey"/>
                        <span class="input-group-btn">
                            <button id="search_button" type="button" class="btn btn-purple btn-sm">
                                搜一搜
                                <i class="icon-search icon-on-right bigger-110"></i>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="table-responsive">
                            <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th class="center">
                                            <label>
                                                <span class="lbl"></span>
                                            </label>
                                        </th>
                                        <th>标题</th>
                                        <th>素材类型</th>
                                        <th>创建/编辑 时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @{
                                        if (Model != null && Model.Any())
                                        {
                                            foreach (var item in Model)
                                            {
                                                 
                                                <tr id="data-item-@item.ID">
                                                     
                                                    <td id="td-1-@item.ID" class="center">@item.ID</td>
                                                    <td id="td-2-@item.ID">@item.Title</td>
                                                    @if(item.Type == "1"){<td id="td-3-@item.ID">文本消息</td> }
                                                    @if(item.Type == "2"){<td id="td-3-@item.ID">图文消息</td> }
                                                    @if(item.Type == "3"){<td id="td-3-@item.ID">音乐消息</td> }
                                                    @if(item.Type == null){<td id="td-3-@item.ID">未知消息</td> }
                                                    <td id="td-4-@item.ID">@item.CreateTime</td>
                                                    <td>
                                                        <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                                                            <a class="btn btn-xs btn-success" href="#">
                                                                <i class="icon-zoom-in bigger-120"></i>查看
                                                            </a>
                                                            <a class="btn btn-xs btn-info" onclick="editItem(@item.ID,@item.Type);">
                                                                <i class="icon-edit bigger-120"></i>编辑
                                                            </a>
                                                            <button class="btn btn-xs btn-danger" onclick="delItem(@item.ID);">
                                                                <i class="icon-trash bigger-120"></i>删除
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            }
                                        }
                                    }
                                    

                                </tbody>
                            </table>
                        </div><!-- /.table-responsive -->
                        
                        <div style="height: 100px; line-height: 50px; clear: both; " align="center">
                            @Html.Pager(Model,
                                        new PagerOptions
                                            {
                                                CssClass = "page_a",
                                                PageIndexParameterName = "pageIndex",
                                                ShowPageIndexBox = false,
                                                PageIndexBoxType = PageIndexBoxType.DropDownList,
                                                ShowGoButton = false,
                                            })
                        </div>

                        
                        <input type="hidden" id="edit_item_id"/>
                    </div><!-- /span -->
                </div><!-- /row -->		
                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
</div>

<!--ueditor、uploadify相关JS-->
<script type="text/javascript" charset="utf-8" src="/Content/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/Content/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/Content/ueditor/ueditor.parse.min.js"></script>
<script type="text/javascript" src="/Content/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="/Content/uploadify/jquery.uploadify.min.js"></script>

<!--要弹出的添加图文素材框-->
<div id="modal-addpttmsg-event" class="modal hide" style="display: none;" aria-hidden="true">
    <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">
            ×</button>
        <h3 id="ptt_dialog_title">图文素材</h3>
    </div>
    <div class="modal-body">
        <span>标题 &nbsp;&nbsp;</span><input id="addpttmsg-title" name="title" class="input-xlarge" type="text" maxlength="40"/> 40个字以内
        <br /><br />
        @*<span>作者 &nbsp;&nbsp;</span><input id="addpttmsg-author" name="author" class="input-xlarge" type="text" value=""/> (选填)
        <br /><br />*@
        <div style="height: 31px;">
            <div style="float: left"><span style="line-height: 31px;">封面 &nbsp;&nbsp;</span></div>
            <div style="float: left;width: 270px;height: 100%;border: 0.1px solid #ccc;">
                <div style="float: left"><input id="custom_file_upload" type="file" name="Filedata" /></div>
                <div style="float: right;height: 100%;"><span id="upload_msg" style="line-height: 31px;">请选择文件</span></div>
            </div>
            <div style="float: left"><span style="line-height: 31px;">&nbsp;封面图片，建议900*500</span></div>
            <input type="hidden" id="addpttmsg-image" name="coverimage"/>
        </div>
        <br />
        <div >
            <div style="float: left"><span>正文 &nbsp;&nbsp;</span></div>
        </div><br /><br />
        <script type="text/plain" id="myEditor" name="contentText" style="width:500px;height:240px;">
            <p>正文内容</p>
        </script>
        
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal" href="#" onclick="clearPttInput();">取消</a>
        <a id="addpttmsg-event-submit" class="btn btn-primary" href="#">确定</a>
    </div>
</div>
<!---->

<!--要弹出的添加音乐素材框-->
<div id="modal-addmscmsg-event" class="modal hide" style="display: none;" aria-hidden="true">
    <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">
            ×</button>
        <h3 id="muc_dialog_title">音乐素材</h3>
    </div>
    <form id="modal-addmscmsg-form" action="/message/addmscmsg" method="POST">
    <div class="modal-body">
        <span>标题 &nbsp;&nbsp;</span><input id="addmscmsg-title" name="title" class="input-xlarge" type="text" maxlength="20"/> 20个字以内
        <br /><br />
        <span>描述 &nbsp;&nbsp;</span><input id="addmscmsg-desp" name="desp" class="input-xlarge" type="text" value=""/> 音乐描述
        <br /><br />
        <span>音乐 &nbsp;&nbsp;</span><input id="addmscmsg-musicurl" name="musicurl" class="input-xlarge" type="text" value=""/> 不含中文的音乐链接http://开头
        <br /><br />
        <input id="music_upload" type="file" name="Filedata" />只有音乐文件，没有链接，可以点击上传<br />
        <span id="uploadmusic_msg" style="line-height: 31px;"></span>
        <br /><br />
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal" href="#" onclick="clearMscInput();">取消</a>
        <a id="addmscmsg-event-submit" class="btn btn-primary" href="#">确定</a>
    </div>
    </form>
</div>
<!---->

<!--要弹出的添加文字素材框-->
<div id="modal-addtxtmsg-event" class="modal hide" style="display: none;" aria-hidden="true">
    <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">
            ×</button>
        <h3 id="txt_dialog_title">文本素材</h3>
    </div>
    <div class="modal-body">
        <span>文本内容</span><br /><br />
        <textarea id="add_msg_txt" style="width:95%;height:130px;"></textarea>
        <br /><br />
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal" href="#" onclick="clearTxtInput();">取消</a> 
        <a id="addtxtmsg-event-submit" class="btn btn-primary" href="#">确定</a>
    </div>
</div>
<!---->


<!-- JS -->

<script type="text/javascript">
    jQuery(function ($) {
        $("#menu-msgmanage-li").addClass("active");
        
        //实例化编辑器
        window.UEDITOR_HOME_URL = "/Content/ueditor/";
        UE.getEditor('myEditor');
        //音乐上传
        $('#music_upload').uploadify({
            'swf': '/Content/uploadify/uploadify.swf',
            'uploader': '/handler/Upload.ashx?t=msc',
            'height': 29,
            'uploadLimit': 1,
            'fileSizeLimit': 10240,
            'fileTypeExts': '*.mp3',
            'fileTypeDesc': 'Music Files (.mp3)',
            'queueID': 'custom-queue',
            'queueSizeLimit': 1,
            'buttonText': '选择文件',
            'onSelectError': function () {
                showError("只能选择10MB以内的文件", "");
            },
            'onUploadStart': function (file) {
                $("#uploadmusic_msg").html('上传中');
            },
            'onUploadSuccess': function (file, data, response) {
                //alert(data.split('|')[1]); //这里获取上传后的URL路径，用来在前台显示 
                $("#uploadmusic_msg").html('上传成功');
                $("#addmscmsg-musicurl").val(data.split('|')[1]);
            }
        });
        //封面上传
        $('#custom_file_upload').uploadify({
            'swf': '/Content/uploadify/uploadify.swf',
            'uploader': '/handler/Upload.ashx?t=coverimg',
            'height': 29,
            'uploadLimit': 1,
            'fileSizeLimit': 2048,
            'fileTypeExts': '*.jpg',
            'fileTypeDesc': 'Image Files (.JPG)',
            'queueID': 'custom-queue',
            'queueSizeLimit': 1,
            'buttonText': '选择图片',
            'onSelectError': function () {
                showError("只能选择一张2MB以内的图片", "");
            },
            'onUploadStart': function (file) {
                $("#upload_msg").html('上传中');
            },
            'onUploadSuccess': function (file, data, response) {
                //alert(data.split('|')[1]); //这里获取上传后的URL路径，用来在前台显示 
                $("#upload_msg").html('上传成功');
                $("#addpttmsg-image").val(data.split('|')[1]);
            }
        });

        $("#search_button").on(ace.click_event, function () {
            var key = $.trim($('#search_key').val());
            if (key.length >= 20) { key = key.substr(0, 20); }
            window.location.href = "/Message/Index?serkey=" + key;
        });

        //添加音乐素材提交
        $("#addmscmsg-event-submit").on(ace.click_event, function () {
            var title = $("#addmscmsg-title").val();
            var desp = $("#addmscmsg-desp").val();
            var musicurl = $("#addmscmsg-musicurl").val();
            if (title == "" || musicurl == "") {
                showError("标题不能为空，音乐链接不能为空", "");
            } else {
                var id = $("#edit_item_id").val();
                if (id == "") {
                    $.post("/Message/AddMscMsg",
                        { title: title, desp: desp, musicurl: musicurl },
                        function (result) {
                            if (result.rel == 1) {
                                showTipAndReload(result.msg, "");
                            } else {
                                showError(result.msg, "");
                            }
                        }
                    );
                } else {
                    $.post("/Message/EditMscMsg",
                        { id: id, title: title, desp: desp, musicurl: musicurl },
                        function (result) {
                            if (result.rel == 1) {
                                showTipAndReload(result.msg, "");
                            } else {
                                showError(result.msg, "");
                            }
                        }
                    );
                }
            }
        });


        //添加图文素材提交
        $("#addpttmsg-event-submit").on(ace.click_event, function () {
            var title = $("#addpttmsg-title").val();
            var image = $("#addpttmsg-image").val();

            var id = $("#edit_item_id").val();
            var text = UE.getEditor('myEditor').getContent();
            if (id == "") {
                if (title == "" || image == "" || !UE.getEditor('myEditor').hasContents()) {
                    showError("标题、封面、内容不能为空", "");
                    return;
                }
                $.post("/Message/AddPttMsg",
                    { title: title, image: image, text: text },
                    function (result) {
                        if (result.rel == 1) {
                            showTipAndReload(result.msg, "");
                        } else {
                            showError(result.msg, "");
                        }
                    }
                );
            } else {

                if (title == "" || !UE.getEditor('myEditor').hasContents()) {
                    showError("标题、内容不能为空", "");
                    return;
                }
                $.post("/Message/EditPttMsg",
                    { id: id, title: title, image: image, text: text },
                    function (result) {
                        if (result.rel == 1) {
                            showTipAndReload(result.msg, "");
                        } else {
                            showError(result.msg, "");
                        }
                    }
                );
            }
            $("#edit_item_id").val('');
        });


        $("#addtxtmsg-event-submit").on(ace.click_event, function () {
            var txtmsg = $('#add_msg_txt').val();
            if (txtmsg == "") {
                showError("文本内容不能为空！", "");
                return;
            }
            var id = $("#edit_item_id").val();
            if (id == "") {
                $.ajax({
                    type: "POST",
                    url: "/message/AddTxtMsg",
                    data: { txt: txtmsg },
                    success: function (ajaxresult) {
                        if (ajaxresult.rel == 1) {
                            showTipAndReload(ajaxresult.msg, "");
                        } else {
                            showError(ajaxresult.msg, "");
                        }
                    }
                });
            } else {
                $.ajax({
                    type: "POST",
                    url: "/message/EditTxtMsg",
                    data: { id: id, txt: txtmsg },
                    success: function (ajaxresult) {
                        if (ajaxresult.rel == 1) {
                            showTipAndReload(ajaxresult.msg, "");
                        } else {
                            showError(ajaxresult.msg, "");
                        }
                    }
                });
            }
            $("#edit_item_id").val('');
        });

        clearTxtInput();
        clearPttInput();
        clearMscInput();
    });

    function delItem(id) {
        bootbox.setDefaults({
            locale: "zh_CN"
        });
        var msg = "确定要删除吗？";
        bootbox.confirm(msg, function (result) {
            if (result) {
                $.ajax({
                    type: "POST", url: "/message/del",
                    data: { id: id },
                    success: function (ajaxresult) {
                        if (ajaxresult.rel == 1) {
                            showTipAndReload(ajaxresult.msg, "");
                        } else {
                            showError(ajaxresult.msg, "");
                        }
                    }
                });
            }
        });
    }

    function editItem(id,type) {
        $("#edit_item_id").val(id);
        var title,
            imgUrl,
            description,
            text,
            musicURL,
            url;
        $.post("/Message/GetMsgByID",
                { id: id },
                function (result) {
                    if (result == null) return;
                    title = result.Title;
                    imgUrl = result.ImgUrl;
                    description = result.Description;
                    text = result.Text;
                    musicURL = result.MusicURL;
                    url = result.Url;

                    if (type == "1") {
                        document.getElementById("a_add_txt").click();
                        //$("#txt_dialog_title").html('文本素材———编辑');
                        $("#add_msg_txt").val(text);
                    } else if (type == "2") {
                        document.getElementById("a_add_ptt").click();
                        //$("#ptt_dialog_title").html('图文素材———编辑');
                        $("#upload_msg").html('默认原图');
                        $("#addpttmsg-title").val(title);
                        UE.getEditor('myEditor').setContent(text, false);
                    } else if (type == "3") {
                        document.getElementById("a_add_msc").click();
                        //$("#muc_dialog_title").html('音乐素材———编辑');
                        $("#addmscmsg-title").val(title);
                        $("#addmscmsg-desp").val(description);
                        $("#addmscmsg-musicurl").val(musicURL);
                    }
                }
            );
    }

    function clearTxtInput() {
        $("#edit_item_id").val('');
        $("#add_msg_txt").val('');  
    }
    function clearMscInput() {
        $("#edit_item_id").val('');
        $("#addmscmsg-title").val('');
        $("#addmscmsg-desp").val('');
        $("#addmscmsg-musicurl").val('');
        $("#uploadmusic_msg").html('');
    } 
    function clearPttInput() {
        $("#edit_item_id").val('');
        $("#addpttmsg-title").val('');
        $("#upload_msg").html('请选择文件');
        UE.getEditor('myEditor').setContent('', false);
    }

</script>